<template>
  <view class="tabbar">
    <view 
      class="tab-item" 
      v-for="(item, index) in tabList" 
      :key="index"
      :class="{ 'active': currentIndex === index }"
      @click="switchTab(index, item)"
    >
      <view class="tab-icon">
        <text class="icon">{{ item.icon }}</text>
        <view v-if="item.badge > 0" class="badge">{{ item.badge }}</view>
      </view>
      <text class="tab-text">{{ item.text }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'Tabbar',
  data() {
    return {
      currentIndex: 0,
      tabList: [
        {
          icon: '🏠',
          text: '首页',
          path: '/pages/index/index',
          badge: 0
        },
        {
          icon: '📦',
          text: '订单',
          path: '/pages/order/list',
          badge: 0
        },
        {
          icon: '💰',
          text: '积分',
          path: '/pages/point/history',
          badge: 0
        },
        {
          icon: '📱',
          text: '扫码',
          path: '/pages/scan/scan',
          badge: 0
        }
      ]
    }
  },
  mounted() {
    this.updateCurrentIndex()
  },
  methods: {
    // 切换标签
    switchTab(index, item) {
      if (this.currentIndex === index) return
      
      this.currentIndex = index
      
      // 跳转页面
      uni.switchTab({
        url: item.path,
        fail: () => {
          // 如果不是tabbar页面，使用navigateTo
          uni.navigateTo({
            url: item.path
          })
        }
      })
    },
    
    // 更新当前索引
    updateCurrentIndex() {
      const pages = getCurrentPages()
      const currentPage = pages[pages.length - 1]
      const currentRoute = currentPage.route
      
      // 根据当前路由设置active状态
      const index = this.tabList.findIndex(item => 
        item.path.includes(currentRoute)
      )
      
      if (index !== -1) {
        this.currentIndex = index
      }
    },
    
    // 设置徽章数量
    setBadge(index, count) {
      if (index >= 0 && index < this.tabList.length) {
        this.tabList[index].badge = count
      }
    },
    
    // 清除徽章
    clearBadge(index) {
      if (index >= 0 && index < this.tabList.length) {
        this.tabList[index].badge = 0
      }
    }
  }
}
</script>

<style scoped>
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  background: #fff;
  border-top: 1rpx solid #f0f0f0;
  display: flex;
  align-items: center;
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 999;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  position: relative;
  transition: all 0.3s;
}

.tab-item.active {
  color: #667eea;
}

.tab-icon {
  position: relative;
  margin-bottom: 8rpx;
}

.icon {
  font-size: 40rpx;
  display: block;
}

.badge {
  position: absolute;
  top: -10rpx;
  right: -10rpx;
  min-width: 32rpx;
  height: 32rpx;
  background: #ff4d4f;
  color: #fff;
  font-size: 20rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8rpx;
  line-height: 1;
}

.tab-text {
  font-size: 20rpx;
  color: inherit;
}

.tab-item.active .tab-text {
  font-weight: bold;
}
</style>
